<template>
	<view>
		<view style="border-left: none; border-right: none; padding-bottom: 0; ">
			<!-- 头部 -->

			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
				styleType="text"></uni-segmented-control>

			<view style="background-color: #f1f1f1;" v-if="current == 0">
				<view class="datePickBox">
					<uni-datetime-picker type="date" v-model="searchDate" @change="changeDate" @maskClick="maskClick"
						:clear-icon="false" style="background-color: #e2e2e2;  border-radius: 20rpx;" />
				</view>
				<view class="chartBox">
					<view class="" style="text-align: center; padding: 20rpx 0;">本周（各楼层）出勤趋势图</view>
					<view style="padding: 0 25rpx;">
						<qiun-data-charts type="line" :opts="opts" :chartData="phyChartData" />
					</view>
				</view>
			</view>

			<view v-if="current == 1" style="background-color: #f1f1f1;">
				<view class="datePickBox">
					<uni-datetime-picker type="date" v-model="searchDate" @change="changeDate" @maskClick="maskClick"
						:clear-icon="false" style="background-color: #e2e2e2;  border-radius: 20rpx;" />
				</view>
				<view class="chartBox">
					<view class="" style="text-align: center; padding: 20rpx 0;">本周（各楼层）出勤趋势图</view>
					<view style="padding: 0 25rpx;">
						<qiun-data-charts type="line" :opts="opts" :chartData="thyChartDate" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import statistics from "@/api/modules/statistics.js"
	import {
		parseTime
	} from "@/utils/date.js"
	export default {
		data() {
			return {
				dataList: [],
				bzrUrl: "/pages/index/supervisorIndex",
				topName: "出勤比例",
				userName: "",
				searchDate: "",
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				chartData: {
					categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
					series: [{
							name: "成交量A",
							data: [35, 8, 25, 37, 4, 20]
						},
						{
							name: "成交量B",
							data: [70, 40, 65, 100, 44, 68]
						},
						{
							name: "成交量C",
							data: [100, 80, 95, 150, 112, 132]
						}
					]
				},
				phyChartData: {},
				thyChartDate: {},
				current: 0,
				items: ["畔湖苑", "听湖苑"],
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				this.getline()
			},
			changeDate(e) {
				console.log(e)
				this.searchDate = this.getMon(e)
				this.getline()
			},
			getMon(date) {
				let nowTemp = new Date(date); //当前时间
				let oneDayLong = 24 * 60 * 60 * 1000; //一天的毫秒数
				let c_time = nowTemp.getTime(); //当前时间的毫秒时间
				let c_day = nowTemp.getDay() || 7; //当前时间的星期几
				let m_time = c_time - (c_day - 1) * oneDayLong; //当前周一的毫秒时间
				let monday = new Date(m_time); //设置周一时间对象
				let m_year = monday.getFullYear();
				let m_month = monday.getMonth() + 1;
				m_month = m_month < 10 ? '0' + m_month : m_month;
				let m_date = monday.getDate();
				m_date = m_date < 10 ? '0' + m_date : m_date;
				return m_year + "-" + m_month + "-" + m_date;
			},
			getline() {
				statistics.getSdAttendanceRateByBuildStorey({
					date: this.searchDate
				}).then(res => {
					this.dataList = res.data
					this.dataList.forEach(item => {
						item.chartData = {}
						item.chartData.categories = ["周一", "周二", "周三", "周四", "周五", "周六"]
						item.chartData.series = item.buildingNoData
					})
					this.dataList.forEach(item => {
						if (item.buildingNo == "畔湖苑") {
							this.phyChartData = item.chartData
						} else if (item.buildingNo == "听湖苑") {
							this.thyChartDate = item.chartData
						}
					})

					console.log(this.phyChartData)
					console.log(this.thyChartDate)
				})
			},
		},
		onLoad() {
			this.searchDate = this.getMon(parseTime(Date.now()).slice(0, 10))
			this.userName = uni.getStorageSync("userName")
			this.getline()
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {}

	/deep/.segmented-control[data-v-064e9cd1] {
		height: 60rpx;
	}

	/deep/.segmented-control__item--text[data-v-064e9cd1] {
		padding: 6rpx;
		border-bottom-width: 6rpx;
	}

	page {
		background-color: #f1f1f1;
	}

	.datePickBox {
		padding: 40rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
		background-color: #f1f1f1;
	}

	.chartBox {
		border-radius: 20rpx;
		background-color: #fff;
	}
</style>